<template>
  <div class="hdgl-edit-step-1">
    <a-form-model
      ref="form"
      :model="model"
      :rules="rules"
      labelAlign="right"
      :label-col="labelCol"
      :wrapper-col="wrapperCol">
      <a-form-model-item label="活动名称" :required="true">
        <a-input
          class="ml-30"
          v-model="model.name"
          placeholder="请输入不超过16个字的活动名称"
          :maxLength="16"
          :suffix="model.name.length+'/16'"
          style="max-width: 300px"/>
      </a-form-model-item>
      <!--            TODO 不能超过会员时间-->
      <a-form-model-item label="结束时间">
        <a-date-picker
          class="ml-30"
          v-model="endTime"
          @change="changeEndTime"
          show-time
          style="max-width: 370px"
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择时间">
        </a-date-picker>
      </a-form-model-item>
      <a-form-model-item label="奖品数量">
        <a-input-number class="ml-30" v-model="model.stock" :min="1"/>
      </a-form-model-item>
      <a-form-model-item label="奖品剩余数量">
        <a-input-number class="ml-30" :value="leftStock" disabled/>
      </a-form-model-item>
      <a-form-model-item label="触发关键字" :required="true">
        <a-input
          class="ml-30"
          v-model="model.triggerKeyword"
          placeholder="请输入不超过8个字的触发关键字"
          :maxLength="8"
          :suffix="model.triggerKeyword.length+'/8'"
          style="max-width: 300px"/>
      </a-form-model-item>
      <a-form-model-item label="触发关键词回复文案">
        <wx-reply-editor class="ml-30" v-model="model.keywordReply" :splitButton="splitButton"/>
      </a-form-model-item>
      <a-form-model-item label="活动阶梯设置">
        <div v-for="(item, index) in awardList" :key="index" class="award-item d-aic">
          {{ toChineseIndex(index) }}级阶梯裂变 助力人数:
          <a-input-number
            class="ml-30"
            style="max-width: 100px;"
            v-model="item.target"
            :min="1"
            :max="10000"/>
          人
          <a-button
            v-if="index>0"
            type="primary"
            shape="circle"
            style="margin-left: 16px;"
            class="d-jcc-aic"
            @click="removeAward(index)">
            <span class="material-icons" style="font-size: 16px;color: white">delete_forever</span>
          </a-button>
        </div>
        <b-button
          prefixIcon="plus"
          class="award-button ml-30"
          v-if="rules.length<3"
          btn-content="增加阶梯"
          type="default"
          ghost="default"
          @click="addNewAward">
        </b-button>
      </a-form-model-item>

    </a-form-model>
  </div>
</template>

<script>
  import WxReplyEditor from './wx-reply-editor'
  import { toChineseIndex } from '../../../../utils'
  import moment from 'moment'

  export default {
    name: 'HdglEditStep1',
    components: { WxReplyEditor },
    props: {
      model: {
        type: Object,
        default: () => {
        }
      }
    },
    data () {
      return {
        endTime: null,
        labelCol: { span: 3 },
        wrapperCol: { span: 13 },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
          triggerKeyword: [
            { required: true, message: '请输入触发关键字', trigger: 'blur' }
          ]
        },
        endTimeOptions: {
          shortcuts: [{
            text: '明天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '一周后',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }, {
            text: '30天后',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            }
          }]
        },
        toChineseIndex
      }
    },
    computed: {
      /**
       * 奖品剩余数量
       */
      leftStock () {
        let s = 0
        if (this.model.stock) {
          try {
            s = Number.parseInt(this.model.stock, 10)
          } catch (e) {
            console.debug('stock设置有误')
          }
        }
        if (this.model.stockUsed) {
          try {
            const u = Number.parseInt(this.model.stockUsed, 10)
            s -= u
          } catch (e) {
            console.debug('stockUsed设置有误')
          }
        }
        return s
      },
      awardList () {
        return this.model.awardList
      },
      splitButton () {
        const btnList = []
        for (let i = 0; i < this.awardList.length; i++) {
          let numCn = null
          if (i + 1 === 1) {
            numCn = '一'
          }
          if (i + 1 === 2) {
            numCn = '二'
          }
          if (i + 1 === 3) {
            numCn = '三'
          }
          btnList.push({ name: numCn + '阶任务目标人数', value: this.awardList[i].target })
        }
        return { name: 'taskTargetNum', btnList: btnList }
      }
    },
      mounted () {
          this.initTime()
      },
    methods: {
        initTime () {
            const time = this.$Utils.getTimeFormat(this.model.endTime)
            this.endTime = this.model.endTime ? moment(time, 'YYYY-MM-DD HH:mm:ss') : ''
        },
      /**
       * 增加新奖励项, 保存钱排序
       */
      addNewAward () {
        this.model.awardList.push({})
      },
      changeEndTime (data, dataString) {
        this.model.endTime = dataString
        this.endTime = data
      },
      removeAward (index) {
        if (this.model.awardList.length <= 1) {
          this.$message.warning('活动阶梯最少1阶')
          return
        }
        this.model.awardList.splice(index, 1)
      },
      check () {
        if (this.model.name.trim().length === 0) {
          throw new Error('请输入活动名')
        }
        if (this.model.triggerKeyword.trim().length === 0) {
          throw new Error('请输入关键字')
        }
        const awardList = this.model.awardList
        this.$refs['form'].validate((valid, errObj) => {
          if (!valid) {
            const message = errObj[Object.keys(errObj)[0]][0].message
            throw new Error(message)
          } else if (awardList.length === 0) {
            throw new Error('活动阶梯最少1阶')
          } else if (awardList[0].target <= 0) {
            throw new Error('活动助力人数最少1人')
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .hdgl-edit-step-1 {
    .award-item {
      margin-bottom: 4px;
    }
  }
</style>
